<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/govmain' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据分析</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane label="数据分析">
        <el-row>
          <el-col :span="6" >
            <el-select v-model="area" placeholder="请选择所在区域">
              <el-option
                v-for="item in options"
                :key="item.code"
                :label="item.label"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="datatype" placeholder="请选择数据类型">
              <el-option
                v-for="item in datatypes"
                :key="item.code"
                :label="item.label"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" >
            <el-button type="primary" icon="search">搜索</el-button>
          </el-col>
        </el-row>
        <el-row  style="padding-top:10px;">
        </el-row>
        <div style="padding-top:10px;">
          <el-table :data="data" border  style="width: 100%;" :fir="true">
            <el-table-column type="index" width="70" label="序号" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="xkzbh" header-align="center" align="center" label="许可证编号">
            </el-table-column>
            <el-table-column prop="dwmc" header-align="center" align="center" label="单位名称">
            </el-table-column>
            <el-table-column prop="thisyear" header-align="center"  align="center" width="120" sortable label="今年数据" >
            </el-table-column>
            <el-table-column prop="lastyear" header-align="center"  align="center" width="120" sortable label="去年数据" >
            </el-table-column>
            <el-table-column prop="tb" label="同比(%)" header-align="center" width="120" sortable align="center">

            </el-table-column>
          </el-table>
          <el-row style="float:right;">
            <el-col :span="24" style="padding-top:30px;float:right;">
              <el-pagination
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                @current-change="handlePageSizeChange"
                layout="total, sizes, prev, pager, next"
                :total="10000">
              </el-pagination>
            </el-col>
          </el-row>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        data:[
          {
            xkzbh:'L-HLJB0078',
            dwmc:'绥芬河市金马国际旅行社有限公司',
            thisyear:1176153,
            lastyear:962101,
            tb:22
          },
          {
            xkzbh:'1-CQ-CJ00046-D-FS-001',
            dwmc:'重庆环亚旅行社攀枝花分社',
            thisyear:1002093,
            lastyear:462743,
            tb:116
          },
          {
            xkzbh:'2015-0001',
            dwmc:'攀枝花市淘旅旅行社',
            thisyear:295913,
            lastyear:365014,
            tb:-18
          },
          {
            xkzbh:'91510000092122119B',
            dwmc:'四川恒大国际旅行社有限公司',
            thisyear:253052,
            lastyear:127525,
            tb:98
          },
          {
            xkzbh:'91510105091262304Y',
            dwmc:'四川懒虫国际旅行社有限公司',
            thisyear:244674,
            lastyear:238616,
            tb:2
          }
        ],
        options: [{
          code: '1',
          label: '北京'
        }, {
          code: '2',
          label: '上海'
        }, {
          code: '3',
          label: '深证'
        }, {
          code: '4',
          label: '广州'
        }, {
          code: '5',
          label: '重庆'
        }],
        datatypes: [{
          code: '1',
          label: '国内游接待人次数'
        }, {
          code: '2',
          label: '国内游组织人天数'
        }, {
          code: '3',
          label: '国内游接待人天数'
        }, {
          code: '4',
          label: '出境游人次数'
        }, {
          code: '5',
          label: '入境游外联人次数'
        }, {
          code: '6',
          label: '入境游接待人次数'
        }, {
          code: '7',
          label: '入境游外联人天数'
        }, {
          code: '8',
          label: '入境游接待人天数'
        }],
        area:'',
        datatype:'',
      }
    },
    methods:{
      handlePageSizeChange(){

      }
    }
  }
</script>
<style></style>
